<template>
  <div id="app">
    <div class="head">
      <div class="head-title">
        <p3> 系统日志 </p3>
      </div>
    </div>
    <div class="main">
      <div class="block">
        <span class="demonstration">请选择时间 </span>
        <el-date-picker
          v-model="searchTime"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>
      </div>

      <div class="block">
        <span class="demonstration">选择菜单{{ value }} </span>
        <el-cascader
          v-model="value"
          :options="options"
          @change="handleChange"
        ></el-cascader>
      </div>
      <div>
        <el-select
          id="searchText"
          v-model="value"
          multiple
          filterable
          remote
          reserve-keyword
          placeholder="请输入关键词"
          :remote-method="remoteMethod"
          :loading="loading"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="under">
      <div class="dataTest">
        <!-- 设备日志 -->
        <!-- <ul>
          <li v-for="(device, deviceID) in devices" :key="deviceID">
            <strong>设备id:</strong>
            {{ device.deviceid }} | <strong>IP地址:</strong> {{ device.ip }} |
            <strong>设备名称:</strong> {{ device.name }} |
            <strong>运行任务码:</strong> {{ device.runtaskcode }} |
            <strong>类型:</strong> {{ device.type }}
          </li>
        </ul> -->
        <!-- <li v-for="(item,key) in Object.entries(items)" :key="key">
        <div v-for="(value,prop) in item[1]" :key="prop">
        <div v-if="['ip','name'].includes(prop)">
            {{ prop }}:{{ value }}
        </div></div>
        </li> -->

        <!-- <div class="eachData" v-for="(item, index) in list" :key="index">
          {{ item }}
        </div> -->
      </div>
    </div>
    <div>
      <h2>今天的系统日志</h2>
      <ul>
        <li v-for="(log, index) in todayLogs" :key="index">{{ log }}</li>
      </ul>
    </div>

    <div>
      <h2>过去一个星期的系统日志</h2>
      <ul>
        <li v-for="(log, index) in lastWeekLogs" :key="index">{{ log }}</li>
      </ul>
    </div>

    <div>
      <h2>过去30天的系统日志</h2>
      <ul>
        <li v-for="(log, index) in last30DaysLogs" :key="index">{{ log }}</li>
      </ul>
    </div>
  </div>
</template>
<script >
// import { options1 } from "../../router/options1";
// import Vue from ;
// new Vue().$mount('app')

export default {
  data() {
    return {
      todayLogs: [],
      lastWeekLogs: [],
      last30DaysLogs: [],
      devices: {},
      value: null,
      options: [
        {
          value: "1",
          label: "系统日志",
          children: [
            {
              value: "101",
              label: "系统初始化",
            },
            {
              value: "102",
              label: "参数修改",
            },
            {
              value: "103",
              label: "系统退出",
            },
            {
              value: "104",
              label: "用户登陆",
            },
            {
              value: "105",
              label: "主机寻呼",
            },
            {
              value: "106",
              label: "主机告警",
            },
            {
              value: "107",
              label: "消防告警",
            },
            {
              value: "108",
              label: "设备间寻呼",
            },
            {
              value: "109",
              label: "设备间对讲",
            },
            {
              value: "110",
              label: "播放钟声",
            },
            {
              value: "111",
              label: "定时节目",
            },
            {
              value: "112",
              label: "播放节目",
            },
            {
              value: "113",
              label: "点播节目",
            },
            {
              value: "114",
              label: "停止",
            },
            {
              value: "115",
              label: "其他",
            },
            {
              value: "116",
              label: "所有",
            },
          ],
        },
        {
          value: "2",
          label: "操作日志",
        },
        {
          value: "3",
          label: "设备日志",
        },
      ],

      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "今天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
        disabledDate(time) {
          let limit = Date.now() - 3600 * 1000 * 24 * 30;
          return time.getTime() > Date.now() || time.getTime() < limit; // 设置禁止选今天以后的日子
        },
      },

      list: ["diyi", "dier"],
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      searchTime: [new Date(new Date().getTime() - 3600 * 1000), new Date()],
      value2: "",
      //   pickerOptions: options1,
      date: "",
      date2: "",
    };
  },
  mounted() {
    this.fetchDevices();
    this.fetchLogs();
  },
  created() {
    console.log();
  },
  methods: {
    handleChange(value) {
      console.log("value:", value);
    },
    // fetchDevices() {
    //   this.$axios
    //     .get("/api/devicemap")
    //     .then((response) => {
    //       console.log(response.data.data);
    //       this.devices = response.data.data;
    //     })
    //     .catch((error) => {
    //       console.log(error);
    //     });
    // },

    fetchLogs() {
      // Replace 'YOUR_API_ENDPOINT' with your actual API endpoint
      this.axios
        .get("/api/getthedirfileinfo?path=log/sys/")
        .then((response) => {
          const allLogs = response.data.data; // Assuming the logs are in a 'data' property
            console.log("allLogs",allLogs)
          // Filter logs for today, last week, and last 30 days
          const today = new Date().toLocaleDateString();
          const lastWeek = new Date(
            new Date() - 7 * 24 * 60 * 60 * 1000
          ).toLocaleDateString();
          const last30Days = new Date(
            new Date() - 30 * 24 * 60 * 60 * 1000
          ).toLocaleDateString();

          this.todayLogs = this.filterLogs(allLogs, today);
          this.lastWeekLogs = this.filterLogs(allLogs, lastWeek);
          this.last30DaysLogs = this.filterLogs(allLogs, last30Days);
        })
        .catch((error) => {
          console.error("Error fetching logs:", error);
        });
    },
    filterLogs(allLogs, date) {
      // Filter logs for a specific date
      return Object.values(allLogs)
        .filter((log) => {
          const logDate = new Date(log.timestamp).toLocaleDateString();
          return logDate === date;
        })
        .map((log) => log.message);
    },
  },
};
</script>
<style scoped></style>